<template>
  <div id="login-content">
    <div class="el-icon-apple apple"></div>
    <el-form :model="ruleForm" status-icon ref="ruleForm" label-width="100px" class="demo-ruleForm">
      <el-form-item label="年龄">
        <el-input v-model="ruleForm.age"></el-input>
        <!-- <input type="text" v-model="ruleForm.age" /> -->
      </el-form-item>
      <el-form-item label="密码" prop="pass">
        <el-input type="password" autocomplete="off" v-model="ruleForm.password"></el-input>
      </el-form-item>

      <el-form-item>
        <button @click.stop.prevent="signIn">登录</button>
        <router-link to="/">注册</router-link>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
import axios from "axios";
export default {
  data() {
    return {
      ruleForm: {
        password: "",
        age: "",
        dataInfo: {}
      }
    };
  },
  methods: {
    // let that = this,
    signIn() {
      axios
        .get("user.json")
        .then(res => {
          // console.log(res.data);
          return res.data;
        })
        .then(data => {
          for (let datas in data) {
            // console.log(data[datas]);
            this.ruleForm.dataInfo = data[datas];
            // console.log(this.ruleForm.dataInfo);
            if (
              this.ruleForm.age == this.ruleForm.dataInfo.age &&
              this.ruleForm.password == this.ruleForm.dataInfo.pass
            ) {
              alert("信息匹配成功！");
              localStorage.setItem(this.ruleForm.age, this.ruleForm.password);
              // this.$router.push("/addinfo");
              this.$router.push("/addinfo");
              return;
            } else {
              //
              alert("信息输入有误！");
              if (confirm("确认要清空输入消息么") == true) {
                this.ruleForm.password = "";
                this.ruleForm.age = "";
                return;
              } else {
                return;
              }
            }
          }
        });
    }
  }
};
</script>
<style lang="less" scoped>
.el-form {
  padding: 0 20px 0 0;
}
#login-content {
  width: 600px;
  background-color: #eee;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 4px;
}
.apple {
  font-size: 50px;
  text-align: center;
}
</style>